<template>
	<view class="personalData">
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :blob="false" :maxWidth="100" :maxHeight="100"></kps-image-cutter>
		<view class="line" @click="chooseImage">
			<text>头像</text>
			<view class="right">
				<SRV-profile :potos="head_portrait" size="120"></SRV-profile>
			</view>

		</view>
		<view class="line">
			<text>姓名</text>
			<view class="right" @click="open">
				<text class="item">{{username}}</text>
				<view class="jt">

				</view>
			</view>

		</view>
		<view class="line">
			<text>手机号</text>
			<view class="right">
				<text>{{mobile}}</text>
			</view>

		</view>
		<view class="line">
			<text>性别</text>
			<view class="right">
				<picker @change="bindPickerChange" :value="gender" :range="genderList">
					<view class="item">{{genderList[gender]}}</view>
				</picker>
				<view class="jt">

				</view>
			</view>

		</view>
		<view class="line">
			<text>生日</text>
			<view class="right">
				<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="item">{{birthday}}</view>
				</picker>
				<view class="jt"></view>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="show">
				<view class="title">修改姓名</view>
				<input type="text" placeholder="请输入修改名称" value="editUser" v-model="editUser" />
				<view class="btn">
					<text @click="getname(0)" style="color: rgba(60, 72, 104, 0.4)">取消</text>
					<text @click="getname(1)">确认</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		data() {
			return {
				genderList: ['保密', '男', '女'],
				head_portrait: "",
				self_info:[],
				username: "",
				mobile: "",
				gender: 0,
				birthday: "",
				url: "",
				volunteer_no: "",
				editUser: "",
				editNo: "",
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		components: {
		kpsImageCutter
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count : 1,
					sizeType: ['compressed'],
					success: (res) => {
						// 设置url的值，显示控件
						this.url = res.tempFilePaths[0];						
					}
				});
			},
			onok(ev) {
				// this.head_portrait = ev.path;
				this.url = "";
				uni.showLoading({
					title: '上传中···',
					mask: true
				});
				uni.uploadFile({
					url: serve.apiUrl() + '/v1/file/images?appkey=' + uni.getStorageSync('appkey'),
					filePath: ev.path,
					name: 'file',
					formData: {
						'access-token': uni.getStorageSync('access-token'),
					},
					success: (uploadFileRes) => {
						uni.hideLoading();
						let result = JSON.parse(uploadFileRes.data);
						if (result.code == 200) {
							this.head_portrait = result.data.imgUrl;
							serve.request({
								url: '/member/member/edit-info',
								data: {
									appkey: uni.getStorageSync('appkey'),
									'access-token': uni.getStorageSync('access-token'),
									head_portrait: result.data.imgPath,
								}
							}).then(res => {
								uni.showToast({
									title: res.message,
									icon: 'none',
								})
							});
						} else {
							uni.showToast({
								title: result.message,
								icon: 'none',
							})
						}
					}
				});
			},
			oncancle() {
				// url设置为空，隐藏控件
				this.url = "";
			},
			getUserInfo() {
				serve.request({
					url: '/member/member/info',
					data: {}
				}).then(res => {
					if (res.code == 200) {
						this.username = res.data.username;
						this.head_portrait = res.data.head_portrait;
						
						this.self_info = res.data;
						this.mobile = res.data.mobile;
						this.gender = res.data.gender;
						this.birthday = res.data.birthday ? res.data.birthday : '请选择';
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
					}
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			},
			open() {
				this.editUser = this.username;
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close();
				this.$refs.editNo.close();
			},
			openNo() {
				this.editNo = this.volunteer_no;
				this.$refs.editNo.open()
			},
			getskip(type) {
				if (type == 0) {
					//头像
					uni.chooseImage({
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.uploadFile({
								url: serve.apiUrl() + '/v1/file/images?appkey=' + uni.getStorageSync('appkey'),
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									'access-token': uni.getStorageSync('access-token'),
								},
								success: (uploadFileRes) => {
									let result = JSON.parse(uploadFileRes.data);
									if (result.code == 200) {
										this.head_portrait = result.data.imgUrl;
										serve.request({
											url: '/member/member/edit-info',
											data: {
												appkey: uni.getStorageSync('appkey'),
												'access-token': uni.getStorageSync('access-token'),
												head_portrait: result.data.imgPath,
											}
										}).then(res => {
											uni.showToast({
												title: res.message,
												icon: 'none',
											})
										});
									} else {
										uni.showToast({
											title: result.message,
											icon: 'none',
										})
									}
								}
							});
						}
					});
				}
			},
			getname(type) {
				if (type == 1) {
					if(this.editUser == '') {
						uni.showToast({
							title: "请填写您的姓名",
							icon: 'none',
						});
						return ;
					}
					var self = this;
					serve.request({
						url: '/member/member/edit-info',
						data: {
							username: self.editUser,
						}
					}).then(res => {
						if(res.code == 200) {
							self.username = self.editUser;
						}
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
					});
				}
				this.close();
			},
			bindPickerChange: function(e) {
				this.gender = e.target.value;
				serve.request({
					url: '/member/member/edit-info',
					data: {
						gender: e.target.value,
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
					})
				});
			},
			bindDateChange: function(e) {
				this.birthday = e.target.value;
				serve.request({
					url: '/member/member/edit-info',
					data: {
						birthday: e.target.value,
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
					})
				});
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}

		},
		onLoad() {
			this.getUserInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh(); //结束下拉加载状态
			}, 1000);
		}
	}
</script>

<style scoped lang="scss">
	.personalData {
		.show {
			width: 80vw;
			background: #FFFFFF;
			border-radius: 20upx;

			.title {
				text-align: center;
				font-size: 38upx;
				height: 80upx;
				line-height: 80upx;
				border-bottom: 1upx rgba(60, 72, 104, 0.05) solid;
			}

			input {
				padding: 20upx 30upx;
				border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
			}

			.btn {
				font-size: 34upx;
				padding: 20upx 90upx 20upx;
				display: flex;
				justify-content: space-between;
			}
		}

		.line {
			height: 140upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0upx 30upx;
			font-size: 32upx;
			border-bottom: 1upx rgba(60, 72, 104, 0.05) solid;


			.right {
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;

				image {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
				}

				.item {
					margin-right: 30upx;
				}

				.jt {
					position: absolute;
					right: 0upx;
					top: 65upx;
					content: '';
					border: 1upx solid rgba(57, 72, 107, 0.5);
					border-width: 0 3upx 3upx 0;
					padding: 6upx;
					transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
				}

			}





		}
	}
</style>
